상태 로직 커스텀훅으로 뽑기

#React #state

import { useEffect, useState } from "react";


const [state, setState] = useState()
useEffect(() => {
  const fetchData = async () => {
    setState(data);
  }
  fetchData();
}, [])

if(state.isLoading) {
  return <LoadingComponent />
}
if(state.error) {
  return <ErrorComponent />
}

이 코드를 리팩토링 해보면

const {isLoading , isFail} = useFetchData();

if(isLoading)  return <LoadingComponent />
if(isFail) return <ErrorComponent />

Custom Hooks를 사용하면 코드를 확장성 있고 재사용 가능하게 작성할 수 있다.